@import 'themes';

@mixin replOutputInteger($theme) {

  .repl-integer {
    .toggle-number {
      cursor: pointer;
      border-bottom: 1px dotted grey;
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
    }
    .mode-group {
      opacity: 0.5;
      margin: 3px 5px;
      display: inline-flex;
      border: 1px solid if($theme == $dark-theme, $dark-app-integer-mode-color, $lt-app-integer-mode-color);
      border-radius: 3px;
      .mode {
        width: 1.2em;
        text-align: center;
        border-right: 1px solid if($theme == $dark-theme, $dark-app-integer-mode-color, $lt-app-integer-mode-color);
        cursor: pointer;
        font-size: 0.8em;

        &:last-child {
          border-right: none;
        }
      }
      .mode.selected {
        background-color: if($theme == $dark-theme, $dark-app-integer-mode-color, $lt-app-integer-mode-color);
        color: white;
      }
      .mode {
        position: relative;
        &:before {
          content: attr(data-token);
          position: absolute;
          top: -1.4em;
          font-size: 0.7em;
          color: if($theme == $dark-theme, $dark-app-integer-mode-title-color, $lt-app-integer-mode-title-color);
        }
      }
    }
  }
}
